<!-- 图片标注弹窗 -->
<template>
  <a-modal v-model:visible="_d.visible" width="100%" wrap-class-name="full-modal" title="图片标注" :footer="false" :bodyStyle="{minHeight: '400px'}">
    <div class="mark-box" ref="markRef"></div>
  </a-modal>
</template>

<script setup>
	import { reactive, ref, computed } from 'vue'
	import "../ImageDoMark/ImageDoMark.css";
	import "../ImageDoMark/ImageDoMark.js";

	const markRef = ref();
	const _d = reactive({
		visible: false,
		
	})

	function open(image, saveImage) {
		if(!image) {
			return;
		}
		_d.visible = true;
		setTimeout(() => {
			ImageDoMark(markRef.value, {
				image: image,
				close: () => {
					_d.visible = false;
				},
				ok: image => {
					_d.visible = false;
					saveImage(image);
				}
			})
		}, 50);
	}

	defineExpose({
		open
	})

</script>
<style lang="less" scoped>
.mark-box {
	height: 100%;
}	
</style>
<style lang="less">
.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
  }
  .ant-modal-body {
    flex: 1;
  }
}
</style>

